自訂元件、props特性

• 能夠利用自訂元件來建構及更新 UI ，是 React 真正的威力所在。
• 自訂元件名稱的第一個字母必須大寫。
• 建立自訂元件：至少要包含一個 render() 方法，用來回傳元件

// ES5 寫法
var Mycomponent = React.creatClass({
   render: function(){
      return React.DOM.h1(null, "Be best!!!");
   }
});

// ES6 寫法
class Mycomponent extends React.Component {
   render: function(){
      return React.DOM.h1(null, "Be best!!!");
   }
}

• 元件的特性( props )

1. 透過 this.props 物件來存取，在元件內部是唯讀的，僅可從外部變更。
2. 可利用 propTypes 特性來宣告及驗證預備接受的 props 的資料型態，若不符會顯示警告。

propTypes: {
   address: React.propTypes.string.isRequired,
},
// 加上 isRequired 表示 address 是元件必要特性，不可省略

3. 可利用 getDefaultProps 方法來設定特性的預設值。(在未接收到外部賦予值時)

getDefaultProps: function() {
   return {
      phoneNumber: 'N/A',
   };
},
// 通常會為沒有 isRequired 的特性設定預設值